import React, {useEffect} from 'react';
import {View} from '@tarojs/components';
import {ShoppingCartOutlined} from "@taroify/icons"

import {Image, Tag, TextEllipsis} from "@taroify/core"

import styles from './index.module.scss';

const Index: React.FC<any> = ({data: {primaryImage, title, spuTagList, minSalePrice, maxLinePrice}}) => {

    useEffect(() => {
        load();
    }, []);

    const load = async () => {
    }


    return (
        <View className={styles.page}>
            <Image className={styles.page_image} width={340} height={340} mode={'scaleToFill'}
                   src={primaryImage}></Image>
            <View className={styles.page_txt}>
                <TextEllipsis className={styles.page_txt_title} rows={2}>{title}</TextEllipsis>
                {
                    spuTagList &&
                    <View className={styles.page_txt_tags}>
                        {
                            spuTagList.map((item, index) => {
                                return <Tag key={index} variant="outlined" shape="rounded"
                                            color="danger">{item.title}</Tag>
                            })
                        }
                    </View>

                }
                <View className={styles.page_txt_price}>
                    <View className={styles.page_txt_price_left}>
                        <View className={styles.page_txt_price_left_left}>¥{minSalePrice / 100}</View>
                        <View className={styles.page_txt_price_left_right}>¥{maxLinePrice / 100}</View>
                    </View>
                    <View className={styles.page_txt_price_right}>
                        <ShoppingCartOutlined size={22} className={styles.page_txt_price_right_icon}/>
                    </View>
                </View>
            </View>

        </View>
    )
        ;
};

export default Index;
